<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>

<style type="text/css">
    .autocomplete-suggestions {
        border: 1px solid #999;
        background: #FFF;
        overflow: auto;
    }

    .autocomplete-suggestion {
        padding: 2px 5px;
        white-space: nowrap;
        overflow: hidden;
    }

    .autocomplete-selected {
        background: #F0F0F0;
    }

    .autocomplete-suggestions strong {
        font-weight: normal;
        color: #3399FF;
    }

    @-moz-document url-prefix() {
        fieldset {
            display: table-cell;
        }
    }

</style>
<title>年月周时间设置 - 云超市</title>
<%--<jsp:include page="../../head.jsp"/>--%>
<script src="${contextPath}/static/ace/components/bootstrap/dist/js/bootstrap.js"></script>

<div class="" id="app">
    <form class="form-inline" name="myForm" style="margin-bottom:5px;margin-top: 10px;">
        <div class="form-group">
            <input id="yearMonthInput" class="form-control input-sm" type="text"
                   placeholder="请输入年月">
        </div>
        <div class="form-group">
            <input id="weekInput" onfocus="this.value=''" class="form-control input-sm" type="text"
                   placeholder="请输入周">
        </div>
        <%--<div class="form-group">
            <input id="beginDateInput" class="form-control input-sm" type="text"
                   placeholder="请输入开始时间">
        </div>
        <div class="form-group">
            <input id="endDateInput" class="form-control input-sm" type="text"
                   placeholder="请输入结束时间">
        </div>--%>

        <button type="button" class="btn btn-success btn-sm" @click="getOrder(1)"
                title="">查询
        </button>
        <button type="button" class="btn btn-info btn-sm" @click="addData()"
                title="">添加
        </button>
<%--        <button type="button" title="根据查询条件导出所有记录" @click="exportExcel();"
                class="btn btn-sm btn-info">导出Excel
        </button>--%>
    </form>

    <div class="row" style="background-color: rgb(53, 147, 202);margin-right: 0px;margin-left: 0px; height: 37px;">
        <div class="col-sm-10" style="margin-top: 6px;">
            <strong style="font-size: 18px;color: #f9f9f9;">年月周时间对应关系</strong>
        </div>
        <div class="col-sm-2" style="text-align: right">

        </div>
    </div>
    <div class="table-responsive" id="tableContainer" style="height: 365px">
        <table class="table table-striped table-condensed table-bordered">
            <thead style="background-color:#eee;">
            <tr>
                <th>年月</th>
                <th>周</th>
                <th>开始时间</th>
                <th>结束时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>

            <tr v-for="(order, index) in orderList">
                <td>{{order.YEAR_MONTH}}</td>
                <td>{{order.WEEK}}</td>
                <td>{{order.BEGIN_DATE}}</td>
                <td>{{order.END_DATE}}</td>
                <td><a href="javascript:void(0)" @click="editData(order.YEAR_MONTH,order.WEEK,order.BEGIN_DATE,order.END_DATE)" style="color: #f59e00">修改</a> | <a href="javascript:void(0)" @click="deleteData(order.YEAR_MONTH,order.WEEK)" style="color: #8A3104">删除</a></td>
            </tr>
            </tbody>
        </table>
    </div>
    <div style="text-align: right;" id="pageDiv"></div>

    <form action="${contextPath}/shop/cust2ShopListExportExcel" method="post" id="exportExcel" style="display:none">
        <input type="hidden" name="stringMap['cityName']" :value="queryModel.cityName">
        <input type="hidden" name="stringMap['quXianName']" :value="queryModel.quXianName">
        <input type="hidden" name="stringMap['channelName']" :value="queryModel.channelName">
        <input type="hidden" name="stringMap['empName']" :value="queryModel.empName">
        <input type="hidden" name="stringMap['custName']" :value="queryModel.custName">
        <input type="hidden" name="stringMap['shopName']" :value="queryModel.shopName">
        <input type="hidden" name="stringMap['custCode']" :value="queryModel.custCode">
        <input type="hidden" name="stringMap['isExp']" :value="queryModel.isExp">
    </form>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" data-backdrop="static" role="dialog"
         aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">年月周时间对应数据维护</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">年月：</label>
                            <div class="col-sm-8">
                                <input class="form-control" id="add_yearMonth" placeholder="请选择年月">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">周：</label>
                            <div class="col-sm-8">
                                <input class="form-control" id="add_week" placeholder="请选择周">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">开始时间：</label>
                            <div class="col-sm-8">
                                <input class="form-control" id="add_beginDate" placeholder="请选择开始时间">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">结束时间：</label>
                            <div class="col-sm-8">
                                <input class="form-control" id="add_endDate" placeholder="请选择结束时间">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" @click="submitData">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="${contextPath}/static/statistics/js/vue.js"></script>
<script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.autocomplete.js"></script>
<script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.min.js"></script>
<script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.fr.js"></script>
<script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript" src="${contextPath}/static/util/my-autocomplete.js"></script>

<script type="text/javascript">
    var laypage = layui.laypage
        , layer = layui.layer;

    var app = new Vue({
        el: '#app',
        data: {
            orderList: [],
            users: [],
            licenses: [],
            paths: [],
            queryModel: {
                yearMonth: '',
                week: '',
                page: '1',
            },
            isNew : '1',

        },
        methods: {
            getInitData: function () {
                var vm = this;

                $('#yearMonthInput').datetimepicker({
                    language: 'zh-CN',
                    weekStart: 1,
                    todayBtn: 1,
                    autoclose: 1,
                    todayHighlight: 1,
                    startView: 3,
                    forceParse: 0,
                    minView: 3,
                    showMeridian: 1,
                    format: "yyyy-mm",
                });

                $('#add_yearMonth').datetimepicker({
                    language: 'zh-CN',
                    weekStart: 1,
                    todayBtn: 1,
                    autoclose: 1,
                    todayHighlight: 1,
                    startView: 3,
                    forceParse: 0,
                    minView: 3,
                    showMeridian: 1,
                    format: "yyyy-mm",
                });

                var weeks = []
                for (var i = 1 ;i <= 6 ;i++) {
                    weeks.push({data:i+'',value:i+''})
                }
                $('#weekInput').autocomplete({
                    lookup: weeks,
                    minChars: 0,
                });

                $('#add_week').autocomplete({
                    lookup: weeks,
                    minChars: 0,
                });

                $('#add_beginDate').datetimepicker({
                    language: 'zh-CN',
                    weekStart: 1,
                    todayBtn: 0,
                    autoclose: 1,
                    todayHighlight: 0,
                    startView: 2,
                    forceParse: 0,
                    minView: 2,
                    showMeridian: 1,
                    format: "yyyy-mm-dd",
                    //startDate:new Date(),
                });

                $('#add_endDate').datetimepicker({
                    language: 'zh-CN',
                    weekStart: 1,
                    todayBtn: 0,
                    autoclose: 1,
                    todayHighlight: 0,
                    startView: 2,
                    forceParse: 0,
                    minView: 2,
                    showMeridian: 1,
                    format: "yyyy-mm-dd",
                    //startDate:new Date(),
                    //endDate : day1,
                });

            },
            disposeQueryModel : function () {
                var vm = this;
                var yearMonth  = $("#yearMonthInput").val();
                var week = $("#weekInput").val();


                vm.queryModel.yearMonth = yearMonth;
                vm.queryModel.week = week;


            },
            getOrder: function (page) {
                var vm = this;
                layer.load(1);
                vm.queryModel.page = page;
                vm.disposeQueryModel();

                $.ajax({
                    url: '${contextPath}/shop/getDateMappingList',
                    type: 'post',
                    data: {
                        stringMap: vm.queryModel
                    },
                    success: function (data) {
                        layer.closeAll('loading')
                        if (data.success == false) {
                            layer.msg("获取出错：" + data.message)
                            return
                        }
                        //console.log(data)
                        var rData = data.data;
                        var dataArray = rData.recordList;
                        if (dataArray.length == 0) {
                            layer.msg("查询没有数据")
                        }
                        app.orderList = dataArray
                        laypage({
                            cont: 'pageDiv'
                            , pages: rData.pageCount //总页数
                            , groups: 5 //连续显示分页数
                            , curr: rData.currentPage
                            , skin: '#1E9FFF',
                            jump: function (obj, first) {
                                var curr = obj.curr;
                                if (!first) {
                                    app.getOrder(curr)
                                }
                            }
                        });
                    },
                    error: function (error) {
                        layer.closeAll('loading');
                        layer.msg('网络错误');
                        if (window.console) console.log(error)
                    }
                })
            },
            exportExcel : function () {
                this.disposeQueryModel();
                $("#exportExcel").submit();
            },
            deleteData : function (yearMonth,week) {

                var indx = layer.confirm('确定要删除吗？', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    layer.close(indx);
                    layer.load(1)
                    $.ajax({
                        url: '${contextPath}/shop/deleteDateMapping',
                        type: 'post',
                        data: {
                            stringMap : {
                                yearMonth : yearMonth,
                                week : week,
                            }
                        },
                        dataType: 'json',
                        success: function (data) {
                            if (data.success) {
                                app.getOrder(1);
                            }
                            layer.msg(data.message);
                            layer.closeAll('loading');
                        },
                        error: function (error) {
                            if (window.console) console.error(error);
                            layer.msg('网络错误');
                            layer.closeAll('loading');
                        }
                    });

                }, function () {
                });
            },
            addData : function () {
                var yearMonth = $("#yearMonthInput").val();
                $("#add_yearMonth").val(yearMonth);

                $("#add_yearMonth").attr("disabled",false);
                $("#add_week").attr("disabled",false);

                var week = $("#weekInput").val();
                $("#add_week").val(week);

                this.isNew = '1';
                $('#myModal').modal('show');
            },
            editData : function (yearMonth,week,beginDate,endDate) {
                $("#add_yearMonth").val(yearMonth);
                $("#add_week").val(week);
                $("#add_yearMonth").attr("disabled",true);
                $("#add_week").attr("disabled",true);
                $("#add_beginDate").val(beginDate);
                $("#add_endDate").val(endDate);
                this.isNew = '0';
                $('#myModal').modal('show');
            },
            submitData: function () {
                var yearMonth = $("#add_yearMonth").val();
                var week = $("#add_week").val();
                var beginDate = $("#add_beginDate").val();
                var endDate = $("#add_endDate").val();

                if (!yearMonth) {
                    layer.msg('请选择年月');
                    return;
                }
                if (!week) {
                    layer.msg('请选择周');
                    return;
                }
                if (!beginDate) {
                    layer.msg('请选择开始时间');
                    return;
                }
                if (!endDate) {
                    layer.msg('请选择结束时间');
                    return;
                }
                layer.load(1);
                $.ajax({
                    url: '${contextPath}/shop/addDateMappingData',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        stringMap: {
                            yearMonth : yearMonth,
                            week : week,
                            beginDate : beginDate,
                            endDate : endDate,
                            isNew :app.isNew,
                        }
                    },
                    //async : false,
                    success: function (data) {
                        layer.closeAll('loading');
                        layer.msg(data.message);
                        if (data.success) {
                            $('#myModal').modal('hide')
                            app.getOrder(1);
                        }

                    },
                    error: function (error) {
                        layer.closeAll('loading');
                        if (window.console) console.error(error);
                        layer.msg('网络错误');
                    }
                });


            },
            
        },
    })
    app.getInitData();
    app.getOrder(1);

    var cityNode, quXianNode, channelNode, empNode, custNode, shopNode;

    <shiro:lacksPermission name="CLOUDERPORDERSPLEMPORDER:STATISTICS">
    empNode = '#empNameInput';
    channelNode = '#channelNameInput';
    <shiro:hasPermission name="CLOUDERPORDERSPLADMINORDER:STATISTICS">
    cityNode = '#cityNameInput';
    quXianNode = '#quXianNameInput';
    </shiro:hasPermission>
    </shiro:lacksPermission>

    custNode = '#custNameInput'
    shopNode = '#shopNameInput'

    organization_tree('${contextPath}', cityNode, quXianNode, channelNode, empNode, custNode, shopNode);
</script>


